import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import styles from './RegistrationPage.module.css'; // 使用CSS Modules导入样式

const RegistrationPage = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { username } = location.state || {}; // 从上一个页面获取的 username
  const [schoolName, setSchoolName] = useState('');
  const [nickname, setNickname] = useState('');
  const [email, setEmail] = useState('');
  const [agreed, setAgreed] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!agreed) {
      alert('请同意服务条款和隐私声明');
      return;
    }

    const formData = {
      username, // 将 username 包含在请求中
      school_name: schoolName,
      nickname,
      email,
    };

    try {
      const response = await fetch('http://localhost:8082/api/personal_register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      

      if (response.ok) {
        alert('注册成功！');
        navigate('/registration-success'); // 注册成功后跳转到注册成功页面
      } else {
        const errorData = await response.json();
        alert(`注册失败: ${errorData.message}`);
      }
    } catch (error) {
      console.error('Error:', error);
      alert('请求失败，请稍后再试。');
    }
  };

  return (
    <div className={styles.registrationPage}>
      <div className={styles.leftSection}>
        <img src="/678.png" alt="智链iLink" className={styles.logo} />
        <h1 style={{color:'white',marginLeft:'-550px'}}>智链iLink</h1>
        <h1 className={styles.tagline}>
          <span className={styles.highlight}>创新与班级管理</span>的信赖之选
        </h1>
        <img src="/yhtx_zc_show.png" alt="介绍" className={styles.showcaseImage} />
      </div>
      <div className={styles.rightSection}>
        <div className={styles.stepsImage}>
          <img src="/yhtx_zc_step.png" alt="步骤" />
        </div>
        <div className={styles.formContainer}>
          <form className={styles.registerForm} onSubmit={handleSubmit}>
            <h2 className={styles.formTitle}>填写信息</h2>
            <p className={styles.text1}>开启智链创新管理之路</p>
            <input
              type="text"
              placeholder="请输入您的学校名称"
              value={schoolName}
              onChange={(e) => setSchoolName(e.target.value)}
              required
            />
            <input
              type="text"
              placeholder="希望怎么称呼您"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              required
            />
            <input
              type="email"
              placeholder="请输入您的邮箱"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <div className={styles.agreement}>
              <input
                type="checkbox"
                checked={agreed}
                onChange={(e) => setAgreed(e.target.checked)}
                required
              />
              <span>我已阅读并同意 <a href="/terms">《智链iLink服务条款》</a> 和 <a href="/privacy">《隐私声明》</a></span>
            </div>
            <button type="submit">下一步</button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default RegistrationPage;
